<template>
    <div class="header">
      <!-- <div></div> -->
        <el-button type="primary">新增商品</el-button>
        <el-form class="el-form">
            <el-form-item>
                <el-input class="el-input" v-model="input" style="width: 240px" placeholder="请输入商品名" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-space wrap>
      <el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>
    </el-space>
  </template>
  

<script>
import { toRefs,reactive,ref } from 'vue'
import {goodsListApi} from "@/util/request.js"
export default{
    name:'Mall',
    setup() {
        const data=reactive({ 
            searchParams:{
                query:"",
                pagesize:5,
                pagenum:1
            },
            total:0,
            goodsList:[], 
        })
        const searchList=()=>{
            goodsListApi(data.searchParams).then(res=>{
                if(res.data){
                    // 
                    console.log("用户数据",res)
                    data.goodsList=res.data.goods
                    data.total=res.data.total
                }
            })
        }
     
        const switchState=state=>{
            switch (state) {
                case 0:
                    return "未通过"
                    break; 
                case 1:
                    return "审核中"
                    
                    break; 
                case 2:
                    return "已审核"
                    
                    break; 
            }
        }
        // 方法初始化
        searchList() 
        return{
            ... toRefs(data),
            searchList, 
            switchState
        }
    }
}
</script>

<style scoped>
.header{
    display: flex;
    justify-content: space-between;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}


</style>